﻿@page "/barcodescanner"
@attribute [TabItemOption(Text = "条码扫描", Icon = "fa fa-barcode")]
@inherits AppComponentBase
@using ZXingBlazor.Components

<a href="https://www.nuget.org/packages/ZXingBlazor#readme-body-tab"><h3>条码扫描 BarcodeReader</h3></a>

<h4>扫描条码/QR码。</h4>
<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/BarcodeScannerPage.razor"><h5>页面源码</h5></a>

<Tab IsOnlyRenderActiveTab>
    <TabItem Text="扫码">

        <button class="btn btn-primary"
                type="button"
                @onclick="(() => { BarCode = string.Empty; ShowScanBarcode = !ShowScanBarcode; })">
            扫码
        </button>
        <br />
        <input type="checkbox" @bind-value="Pdf417" />
        只解码 Pdf417 格式
        <br />

        <input type="checkbox" @bind-value="DecodeContinuously" />
        连续解码
        <br />

        <input type="checkbox" @bind-value="DecodeAllFormats" />
        解码所有编码形式 (+ PDF_417 / DATA_MATRIX...)
        <br />

        @if (Pdf417 | DecodeAllFormats)
        {
            <b>Result:</b>
            <br />
            <pre>@BarCode</pre>
        }
        else if (DecodeContinuously)
        {
            <b>DecodeContinuously:</b>
            <br />
            <pre>@BarCode</pre>
        }
        else
        {
            <input type="text" class="form-select form-control" style="min-width: 100px;"
                   @bind-value="BarCode"
                   placeholder="条码" />
        }

        @if (ShowScanBarcode)
        {
            <BarcodeReader ScanResult="ScanResult"
                           Close="(()=>ShowScanBarcode=!ShowScanBarcode)"
                           OnError="OnError"
                           Pdf417Only="Pdf417"
                           Decodeonce="!DecodeContinuously"
                           DecodeAllFormats="DecodeAllFormats" />

        }
        <p>@message</p>

        <AttributeTable Items="@GetAttributes()" />

    </TabItem>
    <TabItem Text="自定义界面">
        <div>
            <div>
                <BarcodeReader ScanResult="ScanResult2"
                               OnError="OnError"
                               Decodeonce="false"
                               UseBuiltinDiv="false"
                               @ref="barcodeReaderCustom" />

                <div @ref="barcodeReaderCustom.Element">
                    <div style="width: 75vw; max-width: 290px;">
                        <div>
                            <video id="video" playsinline autoplay style="width:70vw;max-width:250px;border: 1px solid red"></video>
                        </div>
                        <div data-action="sourceSelectPanel" style="display:none">
                            <label for="sourceSelect">选择设备:</label>
                            <select data-action="sourceSelect" style="max-width:100%" class="form-select form-control">
                            </select>
                        </div>
                        <button class="btn btn-outline-success p-2 m-1 w-25" data-action="startButton">扫描</button>
                        <button class="btn btn-outline-success p-2 m-1 w-25" data-action="resetButton">重置</button>
                        <button type="button" class="btn btn-outline-success p-2 m-1 w-25" data-action="closeButton">关闭</button>
                    </div>
                </div>
            </div>
            <div style="height: 300px; overflow: scroll ">
                <pre>@BarCodesCustom</pre>

                <p>@message</p>
            </div>
        </div>

    </TabItem>

    <TabItem Text="解码图片/QR码生成">
        <a href="https://www.nuget.org/packages/ZXingBlazor#readme-body-tab"><h3>BarCodes 组件</h3></a>
        <h4>解码图片/QR码生成</h4>

        <Textarea @bind-Value="MessageString" />
                <br />
                <Button Text="生成二维码" OnClick="GenQrcode" />
                <Button Text="返回二维码Svg流" OnClick="GenQrcodeSvg" />
                <Button Text="解码" OnClick="DecodeFromImage" />
                <BarCodes @ref="barCodes" OnQRCodeGen="OnResult" OnDecodeFromImage="OnResult" OnError="OnError" QRCodeWidth="200" />
                <br />
        <Textarea Value="@Result" />
                <br />
                <AttributeTable Items="@GetAttributes2()" />
    </TabItem>

</Tab>

